<template>
  <div id="app">
    <div
      class="project-box"
      :style="{
        transformOrigin: 'center top 0px',
        transform: `scale(${scalseNum},${scalseNum})`,
        '-webkit-transform': `scale(${scalseNum},${scalseNum})`,
        '-moz-transform': `scale(${scalseNum},${scalseNum})`,
        '-o-transform': `scale(${scalseNum},${scalseNum})`,
        '-ms-transform': `scale(${scalseNum},${scalseNum})`,
      }"
    >
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      scalseNum: 0.3, //缩放比例
    };
  },
  methods: {
    resize_window() {
      let w_height = Number(document.documentElement.clientHeight / 1080);
      let w_width = Number(document.documentElement.clientWidth / 1920);
      this.scalseNum = w_height;
      this.scalseNum = 1;
    },
  },
  mounted() {
    //计算缩放比例
    this.resize_window();
    window.addEventListener("resize", () => {
      this.resize_window();
    });
  },
};
</script>
<style>
#app {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  /*background: pink;*/
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.project-box {
  /*width: 1920px;*/
  height: 100vh;
  /*transform-origin: center top 0px;*/
  /* position: relative;
  left: 50%;
  margin-left: -960px; */
}
</style>
